<script setup>
import { useDetailStore } from '@/stores/detail.js';

const detailStore = useDetailStore();
</script>
<template>
	<div class="goods-desc">
		<h4 class="title">商品详情</h4>
		<div class="desc-content">
			<!-- <p>商品详情</p> -->
			<ul class="goods-properties">
				<li v-for="item in detailStore.goods.details?.properties" :key="item.value">
					<p>{{ item.name }}</p>
					<p>{{ item.value }}</p>
				</li>
			</ul>
			<div class="goods-pictures">
				<img v-for="item in detailStore.goods.details?.pictures" :key="item" :src="item" class="" alt="">
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.goods-desc {
	width: 1000px;
	background-color: #fff;
	padding: 20px;
	margin-right: 20px;

	.title {
		font-size: 18px;
		font-weight: normal;
		margin-bottom: 20px;
	}

	.desc-content {
		border-top: 1px solid #eee;
		padding-top: 20px;

		.goods-properties {
			display: flex;
			flex-wrap: wrap;

			li {
				display: flex;
				margin-bottom: 5px;

				p {
					&:first-child {
						color: #999;
						width: 100px;
					}

					&:last-child {
						min-width: 350px;
						max-width: 860px;
					}
				}
			}
		}

		.goods-pictures {
			margin: 20px 0;

			img {
				width: 100%;
			}
		}
	}
}
</style>